<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>简易手机通讯录</title>
		<script>       		        
			        function $(id){return document.getElementById(id);}
			        function saveInfo(){
			            var name1=$("username").value;
			            var phone1=$("userphone").value;    
			            if (name1!="" && phone1!="")  
			            {
			                localStorage.setItem(name1,phone1);
			                loadAllInfo();
			                alert("添加成功"); 
			      $("username").value="";
			      $("username").focus();
			            $("userphone").value="";    
			            }else{
			                alert("请输入姓名和电话！");
			                $("username").focus();
			            }             
			        }			          
			        function findForName(){  
			            var searchname = $("username").value;  
			            var searchphone = localStorage.getItem(searchname);  
			            $("userphone").value=searchphone; 
			        }			        
			        function loadAllInfo(){
			            // localStorage.clear();
			            var result = ""; 
			            if(localStorage.length>0){ 
			                result += "姓名&nbsp;&nbsp;&nbsp;&nbsp;电话\n";  
			                for(var i=0;i<localStorage.length;i++){  
			                    var name= localStorage.key(i);  
			                    var phone = localStorage.getItem(name);  
			                    result += name+"   ---   "+phone+"\n";  
			                }               
			                $("phoneset").innerHTML = result;  
			            }else{  
			                $("phoneset").innerHTML = "通讯录为空……";  
			            }  
			        }
			        function deleteName(){
			      $("userphone").readonly="readonly";
			            localStorage.removeItem($("username").value); //按姓名删除通讯录 
			            $("userphone").value=""; 
			            $("username").value=""; 
			            $("username").focus(); 
			            loadAllInfo();
			        } 
		</script>
	</head>
	<body>
		<article style="width: 350px;height: 450px;text-align: center;border: 12ps groove #0099cc;margin: 0 auto;padding: 20px;">
			<header>
				<h3 style="background: #ededed;padding: 10px auto;">手机通讯录管理器</h3>
			</header>
			<form method="post">
				<fieldset style="width: 300px;text-align: center;">
					<legend align="center">简易手机通讯录</legend>
					<label for="name">姓名：</label>
					<input type="text" id="username" name="username" required="required"/><br />
					<label for="telphone">电话：</label>
					<input type="text" id="userphone" name="userphone" required="required"/><br /><br />
					<input type="button" onclick="saveInfo()" value="添加"/>
					<input type="button" onclick="findForName()" value="查询"/>
					<input type="button" onclick="deleteName()" value="删除"/>
					<input type="reset" >
					<div id="displayallinfo">
						<textarea name="" rows="8" cols="30" id="phoneset"></textarea>
					</div>
				</fieldset>
			</form>
			<footer style="background: #ededed;height: 40px;">
				<p><strong>前端工作室设计</strong><br><strong>版权所有&copy;,2017-2020</strong></p>
			</footer>
		</article>
	</body>
</html>
